<template>
  <div class="arsc-container">
    <!-- Search/Filter Bar -->
    <div class="arsc-search-bar">
      <el-form :inline="true" :model="searchParams" size="small" class="arsc-search-form">
        <el-form-item label="钢种">
          <el-input v-model="searchParams.steelGrade" placeholder="请输入钢种" clearable />
        </el-form-item>
        <el-form-item label="入口厚度分档">
          <el-select v-model="searchParams.entryThicknessBin" placeholder="请选择" clearable>
            <el-option label="分档11" value="11"></el-option>
            <el-option label="分档8" value="8"></el-option>
            <el-option label="分档6" value="6"></el-option>
            <el-option label="分档9" value="9"></el-option>
            <el-option label="分档10" value="10"></el-option>
            <!-- Add more options as needed -->
          </el-select>
        </el-form-item>
        <el-form-item label="宽度分档">
          <el-select v-model="searchParams.widthBin" placeholder="请选择" clearable>
            <el-option label="分档7" value="7"></el-option>
            <el-option label="分档6" value="6"></el-option>
            <!-- Add more options as needed -->
          </el-select>
        </el-form-item>
        <el-form-item label="工艺规则">
          <el-select v-model="searchParams.processRule" placeholder="请选择" clearable>
            <el-option label="1#卷取机纠偏 带钢位置[mm]" value="rule1"></el-option>
            <!-- Add more options as needed -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- Data Table -->
    <div class="arsc-table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        size="small"
        height="100%"
        :header-cell-style="tableHeaderStyle"
      >
        <el-table-column type="index" label="序号" align="center" fixed="left" />
        <el-table-column prop="coilNo" label="卷号"  align="center" fixed="left" />
        <el-table-column prop="materialSteelGrade" label="原料钢种"  align="center" />
        <el-table-column prop="entryThicknessBin" label="入口厚度分档"  align="center" />
        <el-table-column prop="widthBin" label="宽度分档"  align="center" />
        <el-table-column prop="maxValue" label="最大值"  align="center">
            <template #default="scope">{{ scope.row.maxValue?.toFixed(1) }}</template>
        </el-table-column>
        <el-table-column prop="minValue" label="最小值"  align="center">
             <template #default="scope">{{ scope.row.minValue?.toFixed(1) }}</template>
        </el-table-column>
        <el-table-column prop="avgValue" label="平均值"  align="center">
             <template #default="scope">{{ scope.row.avgValue?.toFixed(3) }}</template>
        </el-table-column>
        <el-table-column prop="range" label="极差"  align="center">
             <template #default="scope">{{ scope.row.range?.toFixed(1) }}</template>
        </el-table-column>
        <el-table-column prop="stdDev" label="标准差"  align="center">
             <template #default="scope">{{ scope.row.stdDev?.toFixed(3) }}</template>
        </el-table-column>
        <el-table-column prop="chineseVarName" label="中文变量名"  align="center" />
        <el-table-column prop="time" label="时间" align="center" fixed="right" />
      </el-table>
    </div>

    <!-- Pagination -->
    <div class="arsc-pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        size="small"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

// --- Search Params ---
const searchParams = reactive({
  steelGrade: 'DX51D+Z', // Default from image
  entryThicknessBin: '',
  widthBin: '',
  processRule: 'rule1', // Default from image
});

// --- Table Data ---
interface TableRow {
  coilNo: string;
  materialSteelGrade: string;
  entryThicknessBin: number | null;
  widthBin: number | null;
  maxValue: number | null;
  minValue: number | null;
  avgValue: number | null;
  range: number | null;
  stdDev: number | null;
  chineseVarName: string;
  time: string;
}

// Mock data based on the image
const createMockData = (): TableRow[] => {
  const baseData: Omit<TableRow, 'maxValue' | 'minValue' | 'avgValue' | 'range' | 'stdDev'>[] = [
    { coilNo: 'L12408112200', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 11:32:55' },
    { coilNo: 'L12408111600', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-10 15:54:50' },
    { coilNo: 'L12408096600', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 8, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-10 08:58:44' },
    { coilNo: 'L12408107900', materialSteelGrade: 'DX51D+Z-JD1', entryThicknessBin: 6, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 05:34:43' },
    { coilNo: 'L12408112400', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 13:06:56' },
    { coilNo: 'L12408112000', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 11:27:55' },
    { coilNo: 'L12408137500', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 10:07:43' },
    { coilNo: 'L12408088100', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 9, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-10 11:38:45' },
    { coilNo: 'L12408130700', materialSteelGrade: 'DX51D+Z-BM', entryThicknessBin: 6, widthBin: 6, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-12 22:15:43' },
    { coilNo: 'L12408112600', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 11, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 13:05:55' },
    { coilNo: 'L12408148900', materialSteelGrade: 'DX51D+Z-BM', entryThicknessBin: 10, widthBin: 6, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-12 17:34:43' },
    { coilNo: 'L12408098000', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 6, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 01:00:45' },
    { coilNo: 'L12408065700', materialSteelGrade: 'DX51D+Z', entryThicknessBin: 9, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-10 12:56:45' },
    { coilNo: 'L12408150300', materialSteelGrade: 'DX51D+Z-BM', entryThicknessBin: 10, widthBin: 6, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-12 17:38:44' },
     { coilNo: 'L12408107700', materialSteelGrade: 'DX51D+Z-J', entryThicknessBin: 6, widthBin: 7, chineseVarName: '1#卷取机纠偏 带钢位置[mm]', time: '2024-11-13 04:25:44' },
     // Add more rows to reach ~30 if needed for initial view
     ...Array.from({ length: 15 }, (_, i) => ({
       coilNo: `L12408100${i.toString().padStart(3, '0')}0`, 
       materialSteelGrade: i % 4 === 0 ? 'DX51D+Z-X' : 'DX51D+Z',
       entryThicknessBin: Math.floor(Math.random() * 5) + 6,
       widthBin: Math.floor(Math.random() * 2) + 6,
       chineseVarName: '1#卷取机纠偏 带钢位置[mm]',
       time: `2024-11-${String(10 + Math.floor(i/5)).padStart(2,'0')} ${String(Math.floor(Math.random()*24)).padStart(2,'0')}:${String(Math.floor(Math.random()*60)).padStart(2,'0')}:${String(Math.floor(Math.random()*60)).padStart(2,'0')}`
     }))
  ];

  return baseData.map((item, index) => ({
    ...item,
    maxValue: 13.9,
    minValue: -12.4 - index * 0.1 - Math.random(),
    avgValue: -0.044 - index * 0.1 - Math.random() * 2,
    range: 26.3 + index * 0.1 + Math.random(),
    stdDev: 1.404 + index * 0.2 + Math.random() * 2,
  }));
};

const tableData = reactive(createMockData());

// --- Pagination ---
const pagination = reactive({
  currentPage: 1,
  pageSize: 30, // Default from image
  total: 2742, // Default from image
});

// --- Table Styles (Light Theme) ---
const tableHeaderStyle = {
  background: '#f5f7fa', // Light header background
  color: '#606266',    // Dark text for light header
  fontWeight: '500',    // Slightly bolder header text
  padding: '8px 0'     // Adjust padding as needed
};

// --- Event Handlers ---
const handleSearch = () => {
  ElMessage.success('执行查询');
  // TODO: Implement search logic
  console.log('Search Params:', searchParams);
  // Example: Fetch new data and update tableData & pagination.total
};

const handleReset = () => {
  searchParams.steelGrade = '';
  searchParams.entryThicknessBin = '';
  searchParams.widthBin = '';
  searchParams.processRule = '';
  ElMessage.info('重置搜索条件');
  // TODO: Fetch initial data or clear table
};

const handleExport = () => {
  ElMessage.success('执行导出');
  // TODO: Implement export logic
};

const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1; // Reset to page 1 when size changes
  // TODO: Fetch data for new page size
  console.log(`每页 ${val} 条`);
};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  // TODO: Fetch data for new page
  console.log(`当前页: ${val}`);
};

</script>

<style scoped>
/* Container and Base Styles (Match reference theme) */
.arsc-container {
  padding: 15px;
  background-image: linear-gradient(to top, white, #e6f0ff);
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* Search Bar Styles */
.arsc-search-bar {
  padding: 10px 15px;
  background-color: rgba(245, 247, 250, 0.9); /* Slightly more opaque */
  border-radius: 4px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.arsc-search-form .el-form-item {
  margin-bottom: 8px;
  margin-right: 12px;
}

/* Adjust control widths */
:deep(.arsc-search-form .el-input),
:deep(.arsc-search-form .el-select) {
  width: 180px;
}
:deep(.arsc-search-form .el-select[placeholder="请选择"]) {
    /* Maybe slightly wider for the process rule dropdown */
    width: 220px;
}
:deep(.arsc-search-form .el-form-item__label) {
    font-size: 12px;
    color: #606266;
    padding-right: 8px;
}

/* Table Container Styles */
.arsc-table-container {
  flex-grow: 1;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff; /* Ensure white background */
}

/* Light Table Styles */
:deep(.el-table) {
  font-size: 12px;
}
:deep(.el-table th.el-table__cell) {
  padding: 6px 0;
  background-color: #f5f7fa !important;
  color: #606266 !important;
  font-weight: 500;
}
:deep(.el-table td.el-table__cell) {
  padding: 5px 0;
  color: #606266;
  border-bottom: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed; /* Add right border for grid look */
}
:deep(.el-table td.el-table__cell:first-child) {
   border-left: none;
}
:deep(.el-table th.el-table__cell:first-child) {
   border-left: none;
}
:deep(.el-table th.el-table__cell:last-child) {
   border-right: none;
}
:deep(.el-table td.el-table__cell:last-child) {
   border-right: none;
}

/* Ensure fixed columns have appropriate background */
:deep(.el-table__body tr td.el-table-fixed-column--left),
:deep(.el-table__body tr td.el-table-fixed-column--right) {
    background-color: #fff !important;
    border-left: 1px solid #e4e7ed; /* Ensure borders */
    border-right: 1px solid #e4e7ed;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: #ecf5ff !important;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
   background-color: #d9ecff !important;
}

/* Scrollbar for light theme */
:deep(.el-table__body-wrapper) {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f1f1f1;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 3px;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #c0c4cc;
  border-radius: 3px;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background-color: #a8abb2;
}

/* Pagination Styles */
.arsc-pagination {
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Style pagination for light theme */
:deep(.arsc-pagination .el-pagination) {
  --el-pagination-bg-color: #fff;
  --el-pagination-text-color: #606266;
  --el-pagination-button-disabled-bg-color: #f4f4f5;
  --el-pagination-button-color: #606266;
  --el-pagination-button-disabled-color: #c0c4cc;
  --el-pagination-hover-color: #409EFF;
  --el-color-primary: #409EFF;
}
:deep(.arsc-pagination .el-pagination button),
:deep(.arsc-pagination .el-pager li) {
   border: 1px solid #dcdfe6;
   background-color: var(--el-pagination-bg-color);
}
:deep(.arsc-pagination .el-pager li.is-active) {
   background-color: var(--el-color-primary);
   border-color: var(--el-color-primary);
   color: #fff;
}
:deep(.arsc-pagination .el-pagination button:disabled) {
   background-color: var(--el-pagination-button-disabled-bg-color);
   color: var(--el-pagination-button-disabled-color);
   border-color: #dcdfe6;
}
:deep(.arsc-pagination .el-pagination button:not(:disabled):hover),
:deep(.arsc-pagination .el-pager li:hover) {
    color: var(--el-pagination-hover-color);
    border-color: var(--el-color-primary);
}

</style>
